<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>

<body>
	<script>
		// 通过构造器将目标通知时候执行的函数保存
		class Observer {
			constructor(cb) {
				if (typeof cb === 'function') {
					this.cb = cb;
				} else {
					throw new Error("Observer构造器必须传入函数")
				}
			}
			// 通过update函数执行当目标通知时候的回调函数
			update() {
				this.cb()
			}

		}

		// 目标要维系1个观察者列表
		class Subject {
			constructor() {
				this.obList = [];
			}
			// 实现1个数组将观察者对象添加
			addObserver(ob) {
				this.obList.push(ob)
			}
			// 通过notify函数通知所有的观察者执行update
			notify() {
				this.obList.forEach(ob => {
					ob.update()
				})
			}
		}


		const ob1 = new Observer(() => {
			console.log("根据目标来使观察者1行动")
		})
		const ob2 = new Observer(() => {
			console.log("根据目标来使观察者2行动")
		})

		const target = new Subject();
		target.addObserver(ob1)
		target.addObserver(ob2)

		target.notify()

	</script>
</body>

</html>